<template>
    <div v-if="showMe">
      <back :name="msg"></back>
      <ul class="word-dd">
        <li v-for="din in ding">
          <div class="user-img">
            <img src="../images/shop-logo.png" alt="">
          </div>
          <div class="instbss">
            <div class="paobers">
              <p class="user-name"><span>{{din.title}}</span><span class="dd-zt">{{din.zt}}</span></p>
              <p class="data-time">{{din.time}}</p>
            </div>
            <p class="cp-name"><span class="cp-dm">{{din.name}}</span> <span class="q-s">{{din.mooary}}</span></p>
          </div>
          <div style="clear: both"></div>
        </li>
      </ul>
      <footernav></footernav>
    </div>
</template>

<script>
    // import HeaderComponent from './components/header.vue'
    import back from './../components/home/backTitle.vue'
    import footernav from './../components/commonality/footer_nav.vue'
    export default{
      components: {
        back,
        footernav
      } ,
        //父组件传入的数据
        props: {} ,
        //本地数据
        data(){
            return {
                showMe: false,
                msg: '订单',
                ding:[
                  {
                    title:'上沙麦当劳',
                    zt:'等待商家派送',
                    time:'2017-02-17 18:36',
                    name:'香辣鸡胸肉汉堡',
                    mooary:'￥15.9'
                  },
                  {
                    title:'上沙麦当劳',
                    zt:'订单已完成',
                    time:'2017-02-17 13:36',
                    name:'可口可乐',
                    mooary:'￥7.4'
                  },
                  {
                    title:'上沙麦当劳',
                    zt:'订单已完成',
                    time:'2017-02-16 19:36',
                    name:'金枪鱼肉堡',
                    mooary:'￥15.9'
                  },
                  {
                    title:'上沙麦当劳',
                    zt:'订单已完成',
                    time:'2017-02-17 18:36',
                    name:'薯条',
                    mooary:'￥19.7'
                  }
                ]
            }
        } ,
        //方法
        methods: {} ,
        //进入页面加载
        mounted () {
          if(!this.isLogin){
            this.$router.push({"name":"login"})
            return
          }
          // 设置当前状态为加载中
          this.$store.dispatch('setLoading', true);
          // 模拟请求等待
          var time = Math.floor(Math.random() * 2000);
          console.log('模拟加载用时' + time);
          setTimeout(() => {
            // 页面显示
            this.$store.dispatch('setLoading', false);
            this.showMe = true;
          }, time);
        } ,
        //计算属性
        computed: {
          isLogin () {
            return this.$store.getters.getIsLogin;
          }
        } ,
        //监控数据变化
        watch: {}
    }
</script>

<style lang="less" scoped>
.word-dd{
  width: 100%;
}
.word-dd li{
  padding: 0.1rem 0.1rem 0 0.12rem;
  margin-bottom: 0.1rem;
  background: #fff;
}
.user-img{
  width: 11.2%;
  height: 0.4rem;
  background: #333;
  float: left;
}
.user-img img{
  width: 100%;
  height: 0.4rem;
}
.paobers{
  font-size: 0.15rem;
  border-bottom: 1px solid #eee;
}
.user-name{
  position: relative;
}
.dd-zt{
  position: absolute;
  right: 0;
}
.data-time{
  font-size: 0.12rem;
  color: #999;
  line-height: 0.2rem;
}
.cp-name{
  width: 100%;
  line-height: 0.35rem;
  position: relative;
}
  .instbss{
    width:84%;
    float: right;
    margin-left: 0.15rem;
  }
  .q-s{
    position: absolute;
    right:0;
  }
  .cp-dm{
    color: #666;
  }
</style>
